<template>
  <el-table
    ref="tableSortRef"
    v-loading="props.tableConfig.listLoading"
    :border="true"
    :data="props.tableConfig.list"
    :max-height="props.tableConfig.maxHeight"
    @selection-change="getSelectRows"
    :key="tableKey"
  >
    <el-table-column
      v-if="props.tableConfig['isSelect']"
      align="center"
      type="selection"
      width="55"
    />
    <el-table-column
      v-for="(column, index) in props.tableConfig.columns"
      :key="index"
      :label="column.label"
      :prop="column.prop"
      :sortable="column.sortable"
      align="center"
      :width="column.width"
      :fixed="column.fixed ?? false"
      :show-overflow-tooltip="column.showOverflowTooltip"
    >
      <template v-if="!column.action" #default="{ row }">
        <slot v-if="column.slotName" :name="column.slotName" v-bind="{ row }" />
        <template v-else>
          <template v-if="column.customType">
            <!--tag标签展示-->
            <template v-if="column.customType === 'content'">
              <div
                v-if="getArr(row, column.prop)?.length < 20"
                :style="{ width: column.width }"
                class="content"
              >
                {{ getArr(row, column.prop) }}
              </div>
              <el-tooltip
                v-else
                class="item"
                effect="dark"
                placement="top-start"
              >
                <template #content>
                  <div style="width: 500px">
                    <span>{{ getArr(row, column.prop) }}</span>
                  </div>
                </template>
                <div class="content" :style="{ width: column.width }">
                  {{ getArr(row, column.prop) }}
                </div>
              </el-tooltip>
            </template>
            <template v-if="column.customType === 'ElTag'">
              <el-tag
                :type="
                  props.tableConfig.tagConfig[column.tagKeyValue][
                    row[column.prop]
                  ].type
                "
                effect="light"
              >
                {{
                  props.tableConfig.tagConfig[column.tagKeyValue][
                    row[column.prop]
                  ].name
                }}
              </el-tag>
            </template>
            <template v-if="column.customType === 'image'">
              <el-image
                v-if="getArr(row, column.prop)"
                :style="{
                  width: column.width ? column.width : '150px',
                  height: column.height ? column.height : '150px',
                }"
                preview-teleported
                hide-on-click-modal
                :src="getArr(row, column.prop)"
                :preview-src-list="[getArr(row, column.prop)]"
                fit="cover"
              />
            </template>
          </template>
          <template v-else>
            <!--默认展示渲染-->
            {{ getArr(row, column.prop) }}
          </template>
        </template>
      </template>
      <template v-else #default="{ row }">
        <div class="btn_box">
          <template v-for="(actionItem, index) in column.actions" :key="index">
            <slot
              v-if="actionItem.slotBtnName"
              :name="actionItem.slotBtnName"
              v-bind="{ row }"
            />
            <!-- 排除不需要权限控制的情况 -->
            <template v-else>
              <el-button
                class="btn_item"
                v-if="computedShow(actionItem, row)"
                :text="actionItem.isTextBtn"
                :type="actionItem.type"
                @click="handleClick(actionItem.fnName, row)"
              >
                {{ actionItem.title }}
              </el-button>
            </template>
          </template>
        </div>
      </template>
    </el-table-column>
    <template #empty>
      <!--  <el-image
        class="vab-data-empty"
        :src="require('@/assets/empty_images/data_empty.png')"
      /> -->
      <el-empty description="暂无数据" />
    </template>
  </el-table>
  <el-pagination
    :current-page="props.pagination.page"
    :layout="props.pagination.layout"
    :page-size="props.pagination.limit"
    :total="props.pagination.total"
    background
    @current-change="handleCurrentChange($event, 'page')"
    @size-change="handleCurrentChange($event, 'limit')"
  />
</template>

<script setup>
  const instance = getCurrentInstance()
  const props = defineProps({
    pagination: Object,
    tableConfig: Object,
    tableKey: Number,
  })

  const hasPermissionNew =
    instance?.appContext.config.globalProperties.hasPermission
  const computedShow = computed(() => {
    return (actionItem, row) => {
      // 1. 首先检查权限
      if (
        actionItem['permissionCode'] &&
        !hasPermissionNew(actionItem['permissionCode'])
      )
        return false

      // 2. 如果有自定义函数fc，优先使用fc判断
      if (actionItem['visibleFc']) return actionItem['visibleFc'](row)

      // 3. 否则通过key/showValue和key2/showValue2进行判断
      if (
        actionItem['key'] &&
        row[actionItem['key']] !== actionItem['showValue']
      )
        return false
      return true
    }
  })
  const emit = defineEmits([
    'actionsClick',
    'paginationChange',
    'selectionChange',
  ])

  const getSelectRows = (val) => {
    // state.selectRows = val
    emit('selectionChange', val)
  }

  // 渲染默认值
  const getArr = (row, str) => {
    const obj = row
    return eval(`obj.${str}`)
  }

  //操作按钮点击
  const handleClick = (type, row) => {
    emit('actionsClick', { type, row })
  }

  console.log('props', props)

  const handleCurrentChange = (val, type) => {
    console.log('val', val, type)
    emit('paginationChange', { val, type })
  }
</script>

<style lang="scss" scoped>
  .content {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .btn_box {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(60px, max-content));
    gap: 4px;
    justify-content: center;
    width: 100%;

    // 使用:deep()选择器修复按钮样式
    :deep(.el-button) {
      margin: 0;
      padding: 4px 8px;
      white-space: nowrap;
    }

    .btn_item {
      margin: 0;
      min-width: fit-content;
      padding: 4px 8px;
    }
  }
</style>
